<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM节点</title>
</head>
<body>
<h3>DOM节点</h3>
<p>
    DOM节点 <br>
    DOM树里每一个内容都称之为节点 <br>
</p>

<h4>节点类型</h4>
<p>
    元素节点 <br>
    所有的标签 比如 body、 div <br>
    html 是根节点 <br> <br>

    属性节点 <br>
    所有的属性 比如 href <br> <br>

    文本节点 <br>
    所有的文本 <br><br>

    其他
</p>
<img src="../素材/DOM树.png" alt="">
<hr>

<h3>总结</h3>
<pre style="font-size: 22px;">
1. 什么是DOM 节点？
    DOM树里每一个内容都称之为节点
2. DOM节点的分类？
    元素节点 比如 div标签
    属性节点 比如 class属性
    文本节点 比如标签里面的文字
3. 我们重点记住那个节点？
    元素节点
    可以更好的让我们理清标签元素之间的关系
</pre>
<a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=120&spm_id_from=pageDriver&vd_source=cb928a955f1123af004a2e3158113ea7">
    DOM 节点,视频讲解
</a>
<hr>

<p>
    为什么要找节点? <br>
    比如:节点存在父子关系,通过操作父级完成 子级的一下操作实现
</p>
<p>
    节点关系：针对的找亲戚返回的都是对象 <br>
    父节点 <br>
    子节点 <br>
    兄弟节点
</p>
<hr>

<pre style="font-size: 22px;">
总结:
1. 查找父节点用那个属性？
    子元素.parentNode
2. 查找所有子节点用那个属性？
    父元素.children
3. 查找兄弟节点用那个属性？
    previousElementSibling (上一个兄弟)
    nextElementSibling (下一个兄弟)
</pre>
</body>
</html>